<template>
  <Edialog
    @close="close"
    title="科目选择器(双击确认)"
    :outershow="manufacturerShow"
    :internal="true"
    width="80%"
  >
    <AHMF
      style="height: 70vh"
      :asideWidth="300"
      :rightTitleShow="false"
      :AShow="true"
      leftTitle="模板名称"
    >
      <template #aside>
        <el-tree
          :data="treeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
          highlight-current
          node-key="id"
          ref="tree"
          v-loading="treeLoading"
        ></el-tree>
      </template>
      <template #header>
        <topSearcher
          :searchOptions="searchOptions"
          @onQuery="onQuery"
          @onReset="onReset"
          :border="false"
        ></topSearcher>
      </template>
      <template #main>
        <ETable
          v-if="manufacturerShow"
          v-loading="tableLoading"
          :data="tableData"
          :titleObj="tableColumns"
          @row-dblclick="rowdblclick"
        >
        </ETable>
      </template>
      <template #footer>
        <div class="flex">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.currPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.total"
          >
          </el-pagination>
        </div>
      </template>
    </AHMF>
  </Edialog>
</template>

<script>
import ETable from "@/components/ETable";
import Edialog from "@/components/Edialog";
import Epagination from "@/components/Epagination";
import Eselect from "@/components/Eselect";
import topSearcher from "@/components/topSearcher/topSearcher.vue";
import AHMF from "@/components/topSearcher/AHMF.vue";
import { convertToTreeData } from "@/utils/publicReq.js";
import { BsTemplateByIdApi } from "@/api/templateManage";
import { BsSubjectApi, deleteBsSubjectByIds } from "@/api/subjectConfig";
export default {
  name: "coupon",
  components: {
    Edialog,
    ETable,
    Epagination,
    Eselect,
    AHMF,
    topSearcher,
  },
  data() {
    return {
      manufacturerShow: false,
      treeLoading: false,
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label",
      },

      //表格字段
      tableColumns: [
        {
          prop: "subjectSign",
          label: "科目标识",
        },
        {
          prop: "subjectRowName",
          label: "科目行名称",
        },
        { prop: "subjectColName", label: "科目列名称" },
        //是否动态科目(0:否；1：是)
        // { prop: "isDynamic", label: "科目类型" },
        // { prop: "dataTypeName", label: "数据类型" },
        // { prop: "powerTypeName", label: "权限类型" },
        // { prop: "crTime", label: "创建时间", sortable: "custom" },
      ],
      // 搜索字段
      searchOptions: [
        {
          type: "input",
          label: "科目标识",
          key: "subjectSign",
          value: "",
        },
      ],

      searchForm: {
        templateId: "",
        subjectSign: "",
        sortStr: "&sortList[0].sortName=crTime&sortList[0].sortType=desc",
      },
      tableData: [],
      tableLoading: false,
      pageInfo: {
        currPage: 1,
        pageSize: 10,
        total: 0,
      },
      batchData: [],
      batchDataIds: [],
      spreadsheetData: [],
      currentRow: {
        templateId: "",
        excelJson: "",
        templateCode: "",
      },
    };
  },
  props: {
    parkingListData: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    //点击树节点事件
    handleNodeClick(data) {
      console.log(data);
      // this.spreadsheetData = JSON.parse(localStorage.getItem("loadData"));
    },
    //双击表格事件
    rowdblclick(row) {
      this.$emit("rowdblclick", Object.assign(this.currentRow, row));
      this.manufacturerShow = false;
    },
    async submitFn() {
      if (this.selections.length > 0) {
        this.selections.forEach((item) => {
          this.$set(item, "parkingId", item.id);
        });
        await this.$emit("successFn", this.selections);
        this.manufacturerShow = false;
      } else {
        this.$message.warning("请选择至少一项");
        return;
      }
    },
    close() {
      // 关闭弹框方法
      this.searchForm.subjectSign = "";
      this.manufacturerShow = false;
      this.$emit("close");
    },
    // 打开弹框方法
    async manufacturerOpen(scope) {
      this.manufacturerShow = true;
      this.tableLoading = true;
      this.treeLoading = true;
      this.treeData = await convertToTreeData();
      this.treeLoading = false;
      if (this.treeData.length !== 0) {
        // 假设每个节点都有一个唯一的id作为node-key
        this.$nextTick(() => {
          setTimeout(async () => {
            this.$refs.tree.setCurrentNode(this.treeData[0]);
            await this.handleNodeClick(this.treeData[0]);
          });
        });
      }
    },

    // 获取表格数据
    async getTableData() {
      if (this.searchForm.templateId == "") {
        return;
      }
      this.tableLoading = true;
      // 没有排序条件
      let obj = Object.assign(
        {
          currPage: this.pageInfo.currPage,
          pageSize: this.pageInfo.pageSize,
        },
        this.searchForm
      );
      let res = await BsSubjectApi(obj);
      if (res.data && res.data.bdata.total > 0) {
        this.tableData = res.data.bdata.gdata;
        if (this.tableData && this.tableData.length > 0) {
          this.tableData.forEach((item) => {
            item.isDynamic = item.isDynamic == 0 ? "静态" : "动态";
          });
        } else {
          this.tableData = [];
        }
        this.pageInfo.total = res.data.bdata.total;
      } else {
        this.tableData = [];
        this.pageInfo.total = 0;
      }
      this.tableLoading = false;
    },
    onReset(searchForm) {
      console.log("重置", searchForm);
      // this.searchForm = searchForm;
      this.pageInfo.currPage = 1;
      this.onQuery(searchForm);
    },
    onQuery(searchForm) {
      console.log("查询", searchForm);
      Object.assign(this.searchForm, searchForm);
      // this.searchForm = searchForm;
      this.getTableData();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageInfo.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageInfo.currPage = val;
      this.getTableData();
    },
    onSubmit() {
      console.log("submit!");
    },
    //树节点选中
    async handleNodeClick(data) {
      this.searchForm.templateId = data.id;
      //获取模板数据给新增科目用
      let res = await BsTemplateByIdApi(data.id);
      if (res.data && res.data.bdata && res.data.bcode == 0) {
        // this.currentRow = res.data.bdata;
        this.currentRow.templateId = res.data.bdata.id;
        this.currentRow.templateCode = res.data.bdata.templateCode;
        this.currentRow.excelJson = res.data.bdata.excelJson;
      } else {
        this.currentRow = {
          templateId: "",
          excelJson: "",
          templateCode: "",
        };
      }
      this.pageInfo.currPage = 1;
      this.getTableData();
    },
  },
};
</script>

<style scoped lang="scss">
.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: left;
  background-color: #3c9cff;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 10px;
  justify-content: center;
}
</style>
